<template>
  <div>
    <Emit @showEmit="show" @hideEmit="hide"></Emit>
    <HelloWorld msg="测试一下"/>
    <MyHeader web-name="小米" :age="20" href="https://www.mi.com">你好，世界</MyHeader>
    <Slot context="<h1>主体部分</h1>">
      <div slot="s1"><h1>这里是S1的插槽</h1></div>
      <div>这里是无名插槽</div>
      <template #s2><h1>这里是S2的插槽</h1></template>
    </Slot>
  </div>
</template>

<script>
/* 引入组件（所有的vue文件都可以当做单独的组件来看待和使用） */
import HelloWorld from '@/components/HelloWorld'

import MyHeader from '@/components/MyHeader'

import Slot from '@/components/Slot'

import Emit from '@/components/Emit'
export default {
  name: 'Component',
  components: {
    HelloWorld, MyHeader, Slot, Emit
  },
  data () {
    return {}
  },
  methods: {
    show (msg) {
      console.log('emit被打开', msg)
    },
    hide (msg) {
      console.log('emit被关闭', msg)
    }

    /*
    * 组件传值：
    * 父级向子级传递，通过prop(自定义属性)的方式实现
    * 子级向父级传递，通过emit(自定义事件)的方式实现
    *  */
  }
}
</script>

<style scoped>

</style>
